<template>
  <div class="time-container">
    <div class="scroll-view-wrapper">
      <div class="scroll-view">
        <div
          class="flex-date-wrapper"
          v-for="(item, index) in dateArr"
          :key="index"
          :class="{
              'box-active':
                index == dateActive,
            }"
        >
          <div
            class="flex-box"
            @click="selectDateEvent(index, item)"
          >
            <div class="date-box">
              <span
                class="days"
                :style="{
                  color: index == dateActive ? selectedTabColor : '#333',
                }"
                >{{ item.week }}</span
              >
              <span
                class="date"
                :style="{
                  color: index == dateActive ? selectedTabColor : '#333',
                }"
                >{{ item.day }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 时间选项 -->
    <!-- filter:
                _index < timeActive[1] && _index > timeActive[0]
                  ? 'opacity(0.3)'
                  : '', -->
    <div class="time-box">
      <div class="timearr" v-if="dateArr[dateActive].time.length">
        <div class="item" v-for="(item, _index) in dateArr[dateActive].time" :key="_index">
          <div
            class="item-box"
            :class="{
              disable: item.surplus_num==0,
              active: timeActive[0] == _index ? 'active' : '',
            }"
            :style="{
              background: _index == timeActive[0]
                  ? selectedItemColor
                  : '#F1F3F6'
            }"
            @click="selectTimeEvent(_index, item)"
          >
            <span>{{ item.start_at }}</span>
            <!-- <span
              class="all"
              v-if="_index == timeActive[0] && !item.disable"
              style="font-size: 12px"
              >开始时间</span
            >
            <span
              class="all"
              v-if="_index == timeActive[1] && !item.disable"
              style="font-size: 12px"
              >结束时间</span
            > -->
          </div>
        </div>
      </div>
      <van-empty description="暂无服务时间" v-else />
    </div>
    <!-- 时间选项 -->
  </div>
</template>

<script>
import { dateData, timeData, timeStamp } from "@/utils/date";
let maxIndex;
export default {
  props: {
    // startTime: {
    //   type: String,
    //   default: "08:00",
    // },
    // endTime: {
    //   type: String,
    //   default: "18:00",
    // },
    dateTimeTable: {
      type: Array,
      default: []
    },
    advanceTime: {
      type: Number,
      default: 0,
    },
    timeSlot: {
      type: Number,
      default: 2,
    },
    timeInterval: {
      type: [Number, String],
      default: 0.5,
    },
    selectedTabColor: {
      type: String,
      default: "#0092D5",
    },
    selectedItemColor: {
      type: String,
      default: "#0094D7",
    },
    disableText: {
      type: String,
      default: "约满",
    },
  },
  data() {
    return {
      dateArr: [], //日期数据
      timeArr: [], //时间数据
      dateActive: 0, //选择的日期索引
      timeActive: [], //选择的时间索引
      oldTimeActive: [], //保存的用户晒选的时间
      selectDate: "", //选择的日期数据
      selectTime: "", //选择的时间
      oldSelectTime: "",
      currentTimeStamp: "",
      currentTime: "",
      tabs: 0,
    };
  },
  created() {
    
    //获取日期tab
    let timeTable = JSON.parse(JSON.stringify(this.dateTimeTable));
    this.dateArr = timeTable;
    //时间数据
    this.timeArr = timeTable[this.dateActive].time;
    this.timeArr.length && maxIndex == this.timeArr[this.timeArr.length - 1]["index"];
    //当前时间戳
    this.currentTimeStamp = Date.now() + this.advanceTime * 3600 * 1000;
    console.log(this.currentTimeStamp,'currentTimeStamp')
    this.currentTime = timeStamp(this.currentTimeStamp).hour;
    // this.timeArr.map((item) => {
    //   if (item.time > this.currentTime) {
    //     return (item.dsiabled = true); //判断当前时间大于时间选择则禁用
    //   } else {
    //     return (item.dsiabled = false);
    //   }
    // });
    //默认选中的日期
    this.selectDate = `${this.dateArr[0]["date"]}(${this.dateArr[0]["week"]})`;
    this.timeArr.length && this.timeArr.some((item, index) => {
      const endIndex =
        this.timeSlot / this.timeInterval + index > maxIndex
          ? maxIndex
          : this.timeSlot / this.timeInterval + index;
      this.selectTime = [
        //this.timeArr[index]["start_at"],
        // this.timeArr[endIndex]["time"],
      ]; //默认选中的时间
      // this.oldSelectTime = this.selectTime;
      // this.timeActive = [index, endIndex];
      // // this.timeActive = [index];
      this.oldTimeActive = [];
      // this.oldTimeActive = [index];
      // return !item.dsiabled;
    });
    console.log(this.selectTime,'selectTime')
    // if(this.timeArr.length){
    //   let dsiabled = this.timeArr.every(item => item.dsiabled === false)

    //   console.log(dsiabled,'是否全是不可选', this.timeArr)
    //   if(!dsiabled){
    //       this.$emit(
    //         "selectTime",0,
    //         [undefined,undefined]
    //       );
    //     }else{
    //       this.timeArr.length && this.$emit(
    //           "selectTime",
    //           0,
    //           [`${this.selectDate}${this.selectTime.join("-")}`,`${this.dateArr[0]["date"]} ${this.selectTime.join("-")}`]
    //         );
    //     }
    // }
  },
  methods: {
    selectDateEvent(index, item) {
      this.tabs = 0;
      this.timeArr = this.dateArr[index].time;
      console.log(this.timeArr,'切换后的时间数据')
      if(this.timeArr.length > 0){
        if (this.currentTimeStamp < item.timeStamp) {
          console.log('当前时间小于切换的时间')
          const endIndex = this.timeSlot / this.timeInterval;
          this.timeActive = [];
          this.selectTime = [];
          this.oldTimeActive = [];
        } else {
          this.timeActive = [];
          this.oldTimeActive = [];
          this.selectTime = [];
        }
      }else{
        this.selectTime = [];
        this.oldTimeActive = [];
        this.timeActive = [];
        console.log('timeArr为空')
      }
      this.dateActive = index;
      if(this.timeArr.length > 0){
        this.selectDate == `${this.dateArr[index]["date"]}(${this.dateArr[index]["week"]})`;
      }else{
        this.$emit("selectTime",index, [undefined, undefined]);
      }
      
    },
    selectTimeEvent(index, item) {
      
      if (item.surplus_num==0 || this.timeActive.indexOf(index) > -1) 
      {
        if(item.surplus_num == 0){
          this.$toast("名额为空");
        }
        this.selectTime = []
        this.timeActive = []
        this.oldTimeActive = []
        this.$emit("selectTime",index, [undefined, undefined]);
        return false;
      };
      this.tabs++;
      if (this.tabs % 2 == 0) {
        this.$set(this.timeActive, 0, index);
        this.selectTime[0] = this.timeArr[index]["start_at"];
      } else {
        this.$set(this.timeActive, 0, index);
        this.selectTime[0] = this.timeArr[index]["start_at"];
      }
      console.log(this.timeActive,this.selectTime,'timeActive','selectTime')
      // //判断用户选择的时间是否大于第一次选择的时间
      // if (this.timeActive[0] > this.timeActive[1]) {
      //   const tempTime = this.selectTime[0];
      //   const tempIndex = this.timeActive[0];
      //   this.selectTime[0] = this.selectTime[1];
      //   this.selectTime[1] = tempTime;
      //   this.$set(this.timeActive, 0, this.timeActive[1]);
      //   // this.$set(this.timeActive, 1, tempIndex);
      // }
      if(this.timeArr.length > 0) {
        console.log(this.dateArr)
        if(this.selectTime.length == 0 || this.timeActive.length == 0){
          this.$emit("selectTime",index, [undefined, undefined]);
        }else{
          this.$emit(
            "selectTime",index,
            [`${this.selectDate}${this.selectTime.join("-")}`,`${this.dateArr[this.dateActive]["date"]} ${this.selectTime.join("-")}`]
          );
        }
      }else{
        this.$emit("selectTime",index, [undefined, undefined]);
      }
    },
  },
};
</script>
<style lang="less">
.time-container {
  * {
    box-sizing: border-box;
  }
  .scroll-view-wrapper {
    width: 100%;
    overflow: hidden;
    height: 56px;
    position: relative;

    .flex-date-wrapper {
      height: 56px;
      padding: 6px;
      flex-basis: 52px;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      &.box-active{
        background: #4ECE40;
        color: #fff;
        .date-box{
          .date,.days{
            color: #fff;
          }
        }
      }
    }
    .scroll-view {
      width: 100%;
      white-space: nowrap;
      overflow-x: hidden;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .flex-box {
      display: inline-block;
      height: 100%;
      padding: 0;
      box-sizing: border-box;
      &.active {
        // border-bottom: 4upx solid #0092D5;
        // box-shadow: inset 0 -4upx 0 0 #0092D5;
        .date-box {
          .days {
            color: #0092d5;
          }
          .date {
            color: #0092d5;
          }
        }
      }
      .date-box {
        display: flex;
        height: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 16px;
        color: #333333;
        padding: 10px 0;
        .days{
          color: #333;
          font-size: 16px;
          margin-bottom: 8px;
        }
        .date {
          color: #999;
          font-size: 13px;
        }
      }
    }
  }

  .time-box {
    padding: 0;
    .timearr {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      box-sizing: border-box;
    }

    .item {
      // width: 25%;
      padding: 5px;
      margin-bottom: 6px;
      box-sizing: border-box;
      flex-basis: 20%;
      &-box {
        width: 100%;
        height: 50px;
        padding: 0 12px;
        background: #f1f3f6;
        color: #333;
        font-size: 14px;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &.disable {
          background: #f1f3f6 !important;
          color: #999 !important;
        }
        &.active {
          // background: #0094D7;
          color: #fff;
          font-weight: bold;
        }
        .all {
          font-size: 11px;
        }
      }
    }
  }
}
</style>